<template>

  <Card style="height:800px">
    <div>贷款产品</div>
    <div style="width:600px;margin:30px auto">
      <Row type="flex" align="middle">
        <Col span="8">产品名称:</Col>
        <Col span="14">
        <Input v-model="productName" placeholder="请输入" :disabled="querytype=='1' || allMark"  style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">产品首字母大写名称:</Col>
        <Col span="16">
        <Input v-model="titleCase" placeholder="请输入" :disabled="allMark" style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">最小贷款金额:</Col>
        <Col span="16">
        <Input v-model="loanMinAmount" placeholder="请输入" :disabled="allMark" style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">最大贷款金额:</Col>
        <Col span="16">
        <Input v-model="loanMaxAmount" placeholder="请输入" :disabled="allMark" style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">渠道:</Col>
        <Col span="16">
        <CheckboxGroup v-model="channelList" :disabled="allMark">
          <Checkbox :disabled="allMark" v-for="ichannel in channel" :key="ichannel.channelCode" :label='ichannel.channelCode'>{{ichannel.channelName}}</Checkbox>
        </CheckboxGroup>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">产品类型:</Col>
        <Col span="16">
        <Select v-model="patternType" style="width:200px" :disabled="allMark">
          <Option v-for="item in productTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">产品大类分组:</Col>
        <Col span="16">
        <Select v-model="productGroup" :disabled="allMark" style="width:200px">
          <Option v-for="item in productGroupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">期限范围:</Col>
        <Col span="16">
        <Input v-model="term" placeholder="请输入" style="width: 200px" :disabled="allMark"></Input>
        <Button type="primary" @click="addTerm" size="small" :disabled="allMark" style="margin-left: 20px;">添加</Button>
        <Button type="primary" @click="reset" size="small" :disabled="allMark" style="margin-left: 20px;">重置</Button>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="24">
        <Tag v-for="(item,index) in termNameList" :key="index">{{item}}</Tag>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="12" style="text-align:center">
        <Button type="primary" @click="conf" size="small" :disabled="allMark" style="margin-left: 200px;">确认</Button>
        </Col>
        <Col span="12">
        <Button type="primary" @click="reback" size="small" style="margin-left: 20px;">返回</Button>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>

export default {
  data () {
    return {
      allMark: false,
      allTerm: '',
      term: '',
      titleCase: '',
      productName: '',
      loanMinAmount: '',
      loanMaxAmount: '',
      termList: [],
      termNameList: [],

      channelList: [],
      channel: [],
      $ajax: null,
      querytype: this.$route.query.type,
      patternType: '',
      productGroup: '',
      productTypeList: [
        {
          value: 'A',
          label: '线上'
        },
        {
          value: 'B',
          label: '线下'
        }
      ],
      productGroupList: [
        {
          value: 'C',
          label: '现金贷'
        },
        {
          value: 'S',
          label: '消费分期'
        }
      ],
      type: ''
    }
  },
  created () {
    var vm = this
    this.$ajax = this.$util.ajax()
    vm.type = vm.$route.query.type
    if (vm.type === '2') {
      vm.allMark = true
    }
    // type=1编辑,type=2查看
    if (vm.type === '1' || vm.type === '2') {
      // 查询产品大类信息
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProduct', { productType: vm.$route.query.productType })
        .then(re => {
          if (re.data.data.length > 0) {
            vm.productName = re.data.data[0].productTypeName
            vm.titleCase = re.data.data[0].titleCase
            vm.loanMinAmount = re.data.data[0].minAmount + ''
            vm.loanMaxAmount = re.data.data[0].maxAmount + ''
            if (re.data.data[0].patternType === '线上产品') {
              vm.patternType = 'A'
            } else {
              vm.patternType = 'B'
            }
            if (re.data.data[0].productGroup === '现金贷') {
              vm.productGroup = 'C'
            } else {
              vm.productGroup = 'S'
            }
          }
        })
        .catch(er => {
        })

      // 查询改产品对应的渠道和期数
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannelAndTerm', { productType: vm.$route.query.productType })
        .then(re => {
          let cList = []
          for (let i = 0; i < re.data.data.channelList.length; i++) {
            cList.push(re.data.data.channelList[i].channelCode + '')
          }
          vm.channelList = cList
          for (let i = 0; i < re.data.data.termList.length; i++) {
            vm.termList.push(re.data.data.termList[i].term + '')
          }
          for (let i = 0; i < vm.termList.length; i++) {
            vm.termNameList.push(vm.termList[i] + '期')
          }
          // 查看所有渠道
          this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannel', {})
            .then(re => {
              vm.channel = re.data.data
            })
            .catch(er => { })
        })
        .catch(er => { })
    } else {
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannel', {})
        .then(re => {
          vm.channel = re.data.data
        })
        .catch(er => { })
    }
    // 新增
  },
  methods: {
    reback () {
      var vm = this
      vm.$router.push('productType')
    },
    conf () {
      var vm = this
      var r = /^\+?[1-9][0-9]*$/
      if (vm.productName.trim() === '') {
        this.$Message.warning('产品名称不能为空')
        return
      }
      if (vm.titleCase.trim() === '') {
        this.$Message.warning('产品首字母大写名称不能为空')
        return
      }
      if (vm.loanMinAmount.trim() === '') {
        this.$Message.warning('最小金额不能为空')
        return
      }
      if (vm.loanMaxAmount.trim() === '') {
        this.$Message.warning('最大金额不能为空')
        return
      }
      if (
        !r.test(vm.loanMinAmount.trim()) ||
        !r.test(vm.loanMaxAmount.trim())
      ) {
        this.$Message.warning('金额输入不正确')
        return
      }
      if (
        parseInt(vm.loanMinAmount.trim()) > parseInt(vm.loanMaxAmount.trim())
      ) {
        this.$Message.warning('最小金额应该小于最大金额')
        return
      }
      if (vm.termList.length === 0) {
        this.$Message.warning('请选择期限范围')
        return
      }
      if (vm.channelList.length === 0) {
        this.$Message.warning('请选择渠道')
        return
      }
      if (vm.patternType.trim() === '') {
        this.$Message.warning('产品类型不能为空')
        return
      }
      if (vm.productGroup.trim() === '') {
        this.$Message.warning('产品大类不能为空')
        return
      }
      var param = {
        productType: vm.$route.query.productType,
        titleCase: vm.titleCase,
        productTypeName: vm.productName,
        minAmount: vm.loanMinAmount.trim(),
        maxAmount: vm.loanMaxAmount.trim(),
        termList: vm.termList,
        patternType: vm.patternType,
        productGroup: vm.productGroup,
        channelList: vm.channelList
      }
      if (!confirm('确认提交?')) {
        return
      }
      vm.confMark = true

      if (vm.$route.query.type !== '1') {
        this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/productInsert', param)
          .then(re => {
            if (re.data.code === 'success') {
              this.$Message.success(re.data.data)
              vm.confMark = false
              vm.$router.push('productType')
            } else {
              this.$Message.error(re.data.data)
            }
          })
          .catch(er => {
            vm.confMark = false
          })
      } else if (vm.$route.query.type === '1') {
        this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/editConfirm', param)
          .then(re => {
            if (re.data.code === 'success') {
              this.$Message.success(re.data.data)
              vm.$router.push('productType')
              vm.confMark = false
            } else {
              this.$Message.error(re.data.data)
            }
            // this.$alert({ title: "提示", content: re.data.data });
          })
          .catch(er => {
            vm.confMark = false
          })
      }
      //   vm.$router.push({ name: "dkcpdetail", query:{channelList:vm.channelList,termList:vm.termList,gradeList:vm.gradeList}});
    },
    addTerm () {
      var vm = this
      var r = /^\+?[1-9][0-9]*$/
      if (!r.test(vm.term)) {
        this.$Message.warning('输入期数不正确')
        return
      }
      for (var i = 0; i < vm.termList.length; i++) {
        if (vm.termList[i] === vm.term) {
          this.$Message.warning('期数已经存在')
          return
        }
      }
      vm.termList.push(vm.term)
      vm.termNameList.push(vm.term + '期')
    },
    reset () {
      var vm = this
      vm.termList = []
      vm.termNameList = []
      vm.term = ''
    }
  }
}
</script>

<style lang="less">
.ll {
}
#middle {
  margin: 100px auto;
  width: 500px;
}
#middle .v-form-label {
  font-size: 15px;
}
#middle .versionNum {
  width: 80px;
}
#middle .channel {
  font-size: 12px;
}
.bt {
  margin: 10px 80px;
}
.check {
  display: inline-block;
}
.termRange {
  margin-right: 20px;
}
.v-tag {
  padding: 6px 10px;
  min-width: 10px;
}
#tagContainer {
  margin-top: 10px;
}
.middiv {
  display: inline-block;
  width: 118px;
}
</style>
